import Taro, { Component } from "@tarojs/taro";
import { View, ScrollView, Text, Image } from "@tarojs/components";
import "./item.less";

class Item extends Component {
  state = {
    times: ["ctime", "appointime","", "comdate", "orderdate","ctime"]
  };

  handleOnScrollToUpper() {
    const { parent } = this.props;
    const { params } = parent.state;
    parent.setState(
      {
        page: 1
      },
      async () => {
        await parent.props.getCustomerList({ ...params, page: 1 });
      }
    );
  }

  handleOnScrollToLower() {
    const { list } = this.props;
    if (list.length > 0 && list.length % 10 === 0) {
      const { parent } = this.props;
      const { params, page } = parent.state;
      parent.setState(
        {
          page: page + 1
        },
        async () => {
          await parent.props.getCustomerList({
            ...params,
            page: parent.state.page
          });
        }
      );
    }
  }

  render() {
    const { template, currentType, currentState } = this.props.parent.state;
    const { list } = this.props;
    const { times } = this.state;
    const { status } = this.props.parent.$router.params;
    const clientHeight = document.getElementById("app").clientHeight - 105;
    return (
      <View className="customer-list-body">
        <ScrollView
          className="container"
          scrollY
          scrollWithAnimation
          style={{ height: clientHeight + "px" }}
          scrollTop="0"
          lowerThreshold="10"
          onScrollToUpper={this.handleOnScrollToUpper.bind(this)}
          onScrollToLower={this.handleOnScrollToLower.bind(this)}
        >
          <View className="body-list">
            {list.length > 0 ? (
              [
                list.map((item, index) => {
                  console.log(template[currentType])
                  return (
                    <View className="list-item">
                      <View className="first-part">
                        <Text className="customer-name-list">{item.uname}</Text>
                        <Image
                          onClick={() => {
                            window.location.href = "tel:" + item.tel;
                          }}
                          className="phone-img"
                          src={require("../../assets/img/phone.png")}
                        />
                      </View>
                      <View className="second-part">
                        <Text className="source">{item.name}</Text>
                      </View>
                      <View className="third-part">
                        <Text className="sub-time">
                          {parseInt(status) === 0
                            ? "预约时间：" + item.appointime.substring(0,10)
                            : template[currentType] +
                              "：" +
                              item[times[currentState]] }
                        </Text>
                        {(currentType === "已到司" ||
                          currentType === "已成交") && (
                          <View className="mode-money">
                            佣金：
                            <Text
                              style={{
                                color:
                                  currentType === "已到司"
                                    ? "#FBAA65"
                                    : "#FA8891"
                              }}
                            >
                              {item.cprice}
                            </Text>
                          </View>
                        )}
                      </View>
                    </View>
                  );
                }),
                list.length % 10 > 0 && (
                  <View style="display:flex;flex-direction:row;justify-content:center">
                    <Text style="font-size:12px;color:#cccccc;">
                      -没有更多了-
                    </Text>
                  </View>
                )
              ]
            ) : (
              <View className="has-no-data">
                <Text style="font-size:12px;color:#cccccc;">- 暂无数据 -</Text>
              </View>
            )}
          </View>
        </ScrollView>
      </View>
    );
  }
}
export default Item;
